<template>
    <div class="alarmConfiguration zy-content pd50">
        <back-level @click="close" />
        <!-- 工装与设备 -->
        <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
        <div class="alarmConfiguration">
            <div class="list-layout mt16">
                <div class="btns clear">
                    <span class="title">{{ $t('common.listInformation') }}</span>
                    <Button @click="createfaultCodeShowH">{{ $t('common.New') }}</Button>
                    <Button @click="delFaultCodeShowClick">{{ $t('common.batchDelete') }}</Button>
                </div>
                <!-- 表格 -->
                <div class="tableContent">
                    <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columns"
                        ellipsis ref="selection" stripe :data="dataArr" @on-selection-change="onSelectChange">
                        <template slot-scope="{ row }" slot="action">
                            <span class="operationBtn" @click="delRow(row)"><i class="iconfont zy-common-shanchu"></i>{{
                                $t("common.Delete") }}</span>
                        </template>
                    </Table>
                </div>
                <!-- 分页 -->
                <div class="pageWrap mt16">
                    <pageLeftTitle :total="total" :selected="delIds.length" />
                    <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
                </div>
            </div>
        </div>
        <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t("common.confirmDelete") }}</span>
            </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{
                    $t("common.Cancle")
                }}</Button>
                <Button type="primary" :loading="loading" @click="deleteOk">{{
                    $t("maintenance.Confirmed")
                }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="create" title="关联用户新增" :loading="loading" width="1200">
            <Row style="padding-bottom:16px">
                <Col span="4" align="center" style="line-height:32px">
                姓名：
                </Col>
                <Col span="6" align="left">
                <Input v-model="userKey" :placeholder="`${$t('common.inputInfo')}`" clearable
                    @on-change="getUserList(userKey)" />
                </Col>
                <Col span="2" align="center">

                </Col>
                <Col span="12" align="center" style="line-height:32px">
                已选用户列表
                </Col>
            </Row>
            <Row>
                <Col span="12" align="center">
                <Table ellipsis ref="selection" :columns="userColumns" :data="userList" height="520" width="580">
                    <template slot-scope="{ row }" slot="action">
                        <span style="color: #3271f0;cursor: pointer;" @click="selectClick(row)">选择</span>
                    </template>
                </Table>
                </Col>
                <Col span="12" align="center">
                <Table ellipsis ref="selection" :columns="userColumns" :data="selectList" height="520" width="580">
                    <template slot-scope="{ row }" slot="action">
                        <span style="color: #3271f0;cursor: pointer;" class="operationBtn" @click="delClick(row)">
                            {{ $t('common.Delete') }}
                        </span>
                    </template>
                </Table>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loading" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>
   <!--0 weiguanl  -->
<script>
import {
    selectAssUserPage,
    getLinkList,
    getDeviceNoList,
    deleteApi,
} from "@/api/system/equipmentAssociation.js";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "associationUser", //仓库配置
    components: { search },
    mixins: [toggleTableOperation],
    data() {
        return {
            test: [],
            //一级搜索
            userColumns: [
                {
                    title: '工号',
                    key: 'empno',
                    align: 'center'
                },
                {
                    title: '名称',
                    key: 'realname',
                    align: 'center'
                },
                {
                    title: '手机号',
                    key: 'phone',
                    align: 'center'
                },
                {
                    title: '用户名称',
                    key: 'username',
                    align: 'center'
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    align: "center"
                }
            ],
            searchData: [
                {
                    title: "姓名",
                    key: "realname",
                },
                {
                    title: "用户名",
                    key: "username",
                },
                {
                    title: "手机号",
                    key: "phone",
                },
            ],
            //一级table配置
            columns: [
                {
                    key: "selection",
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    title: "工号",
                    key: "empno",
                    minWidth: 100,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: "姓名",
                    key: "realname",
                    minWidth: 100,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: "手机号",
                    key: "phone",
                    minWidth: 100,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: "用户名",
                    key: "username",
                    minWidth: 100,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: "操作",
                    slot: "action",
                    fixed: "right",
                    minWidth: 180,
                    align: "center",
                },
            ],
            loading: false,
            //三级搜索参数
            searchParams: {},

            //一级页面分页参数
            pageNum: 1,
            pageSize: 10,
            total: 0,

            dataArr: [],
            userList: [],
            allCheck: false,
            create: false,
            delFaultCodeShowF: false, //是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: [],
            selection: [],
            selectList: [],
            targetRow: {},
        };
    },
    mounted() {
        this.getTableColumnsWidth(this.columns);
        this.searchList();
    },
    methods: {
        delFaultCodeShowClick() {//点击批量删除
            if (!this.delIds || this.delIds.length < 1) {
                this.$Message.warning(this.$t('common.selectInfo')+'一条数据');
                return;
            }
            this.delFaultCodeShowF = true;
        },
        getSearch(params) {
            this.searchParams = JSON.parse(JSON.stringify(params[0]));
            this.pageNum=1;
            this.searchList();
        },
        selectClick(row) {
            let status = false
            this.selectList.some((item, i) => {
                if (item.userId === row.userId) {
                    this.$Message.warning(({ content: "该用户已被选择", duration: 6, closable: true }));
                    status = true
                }
            })
            if (status === false) {
                this.selectList.unshift(row)
            }
        },
        delClick(row) {
            this.selectList.some((item, i) => {
                if (item.userId === row.userId) {
                    this.selectList.splice(i, 1)
                    return true
                }
            })
        },
        addOk() {
            let params = []
            const that = this;
            if (this.selectList.length < 1) {
                this.$Message.warning(({ content: "请选择用户后提交", duration: 6, closable: true }));
                return false
            }
            params = this.selectList.map((item, index) => {
                return { ...item, deviceCode: that.$route.query.deviceCode }
            })
            this.loading = true;
            this.axios({
                method: 'post',
                url: "/dms/deviceUser/deviceAssociationUser",
                data: params
            }).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.create = false;
                    this.changeNum()
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            });
        },
        reset() {
            this.searchParams = {};
            this.changeNum();
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        createfaultCodeShowH(row) {//点击增加或编辑
            this.getUserList()
            // this.userKey = ''
            this.selectList = []
            this.create = true;
        },
        onSelectChange(selection) {
            let myArray = [];
            selection.map((item, index) => {
                myArray.push(item.id);
            });
            if (myArray.length > 0) {
                this.allCheck = true
            } else {
                this.allCheck = false
            }
            this.delIds = myArray;
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                deviceCode: this.$route.query.deviceCode,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key]);
                }
            }
            // /dms/deviceUser/selectNotAssUserPage
            selectAssUserPage(params).then((res) => {
                if (res.code === 200) {
                    this.dataArr = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
        getUserList(query) {
            this.axios({
                method: 'POST',
                url: '/dms/deviceUser/selectNotAssUserPage',
                data: {
                    pageNum: 1,
                    pageSize: 9999,
                    deviceCode: this.$route.query.deviceCode,
                    realname:query,
                }
            }).then(res => {
                if (res.code === 200) {
                    this.userList = res.data.records
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        delRow(row) {
            this.delFaultCodeShowF = true;
            this.delIds = [row.id];
            // this.targetRow = row;
        },
        deleteOk(ids) {
            this.loading = true;
            this.axios({
                method: 'DELETE',
                url: '/dms/deviceUser/deleteDeviceUser',
                data:this.delIds,
            }).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.delIds=[];
                    this.changeNum();
                    this.$Message.success("删除成功");
                    this.delFaultCodeShowF = false;
                    this.allCheck = false
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        }
    },
};
</script>
      
<style scoped lang="scss">
.ivu-input-number {
    width: -webkit-fill-available;
}

.btn-box {
    padding: 8px 5px !important;
}
</style>